import React, { Component, lazy } from 'react'

// 引入样式文件
import './Main.css'

// 1、导入路由依赖模块
import {
  Route,
  NavLink,
  Redirect
} from "react-router-dom"

// 2、导入路由视图组件
const Home = lazy(() => import('./Home'))
const Cart = lazy(() => import('./Cart'))
const Ucenter = lazy(() => import('./Ucenter'))

export default class Main extends Component {
  render() {
    return (
      <div>
        {/* <h2>布局页面</h2> */}
        <div className="content">
          <Route path="/main">
            <Redirect to="/main/home" />
          </Route>
          <Route path="/main/home" component={Home} />
          <Route path="/main/cart" component={Cart} />
          <Route path="/main/ucenter" component={Ucenter} />
        </div>

        <div className="bottom-nav">
          <NavLink to="/main/home">首页</NavLink>
          <NavLink to="/main/cart">购物车</NavLink>
          <NavLink to="/main/ucenter">用户中心</NavLink>
        </div>
      </div>
    )
  }
}
